<template>
  <div class="bottomList">
    <div class="bottom_title">
      <span><i class="el-icon-circle-check"></i><span>官方正版</span></span>
      <span><i class="el-icon-box"></i><span>急速物流</span></span>
      <span><i class="el-icon-first-aid-kit"></i><span>官方正版</span></span>
      <span><i class="el-icon-discount"></i><span>免费定制</span></span>
    </div>
    <div class="bottom_main">
      <div class="List">
        <div class="remen">
          <p>热门链接</p>
          <ul>
            <!-- <li>X系列+</li>
            <li>S系列+</li>
            <li>T系列+</li>
            <li>Y系列+</li>
            <li>NEX系列+</li>
            <li>iQOO手机+</li>
            <li>智能硬件+</li>
            <li>S16&nbsp;Pro+</li>
            <li>X90&nbsp;Pro+</li> -->
          </ul>
        </div>
        <div class="goumai">
          <p>在线购买</p>
          <ul>
            <!-- <li>官方商城</li>
            <li>选购手机</li>
            <li>选购配件</li>
            <li>订单查询</li>
            <li>官网APP下载</li>
            <li>以旧换新</li> -->
          </ul>
        </div>
        <div class="fuwu">
          <p>服务支持</p>
          <ul>
            <!-- <li>体验店</li>
            <li>服务首页</li>
            <li>真伪查询</li>
            <li>服务网点查询</li>
            <li>vivo&nbsp;care</li>
            <li>vivo云服务</li>
            <li>常见问题</li>
            <li>服务政策</li>
            <li>环保回收</li> -->
          </ul>
        </div>
        <div class="shequ">
          <p>商务合作</p>
          <ul>
            <!-- <li>采购平台</li>
            <li>供应商协同平台</li>
            <li>开放平台</li>
            <li>企业服务</li> -->
          </ul>
        </div>
        <div class="guanyu">
          <!-- <p>关于我们</p> -->
          <ul>
            <!-- <li>vivo简介</li> -->
            <!-- <li>OriginOS</li> -->
            <!-- <li>工作机会</li>
            <li>新闻资讯</li>
            <li>隐私中心</li>
            <li>廉正合规</li>
            <li>可持续发展</li>
            <li>vivo&nbsp;VISION+</li> -->
          </ul>
        </div>
      </div>

      <div class="relation">
        <!-- <div class="kefu">
          <div class="title">
            <i class="el-icon-chat-dot-round"></i>
            <span>在线客服</span>
          </div>
        </div> -->

        <div class="rexian">
          <div class="title">
            <i class="el-icon-phone"></i>
            <span>全国客户服务热线 7*24小时</span>
          </div>

          <p>400-678-9688</p>
        </div>

        <div class="NEXrexian">
          <div class="title">
            <i class="el-icon-chat-line-square"></i>
            <span>NEX专属服务热线 7*24小时</span>
          </div>

          <p>400-679-9688</p>
        </div>

        <div class="emilt">
          <div class="title">
            <i class="el-icon-view"></i>
            <span>服务监督邮箱</span>
          </div>
          <p>vivo@vivo.com</p>
        </div>

        <div class="guanzhu">
          <div class="title">
            <i class="el-icon-circle-plus-outline"></i>
            <span>关注vivo</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-xinlangweibo"></i>
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-zhifubao"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomList",
};
</script>

<style lang="scss" scoped>
.bottomList {
  padding: 0 5%;
  background-color: #242933;
  color: #fff;
  font-size: 14px;
  .bottom_title {
    line-height: 100px;
    display: flex;
    border-bottom: 1px solid #fff;
    justify-content: space-evenly;
    margin-bottom: 50px;
    padding-top: 30px;
    span {
      font-size: 25px;
      span {
        padding-left: 10px;
      }
    }
  }
  .bottom_main {
    display: flex;
    justify-content: space-between;
    .List {
      display: flex;
      width: 50%;
      justify-content: space-between;

      p {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
      }

      ul {
        li {
          padding: 10px 0;
          font-size: 12px;
          color: #768094;
        }
      }
    }

    .relation {
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      & > div {
        width: 40%;
        margin-bottom: 30px;

        .title {
          display: flex;
          align-items: center;

          i {
            display: block;
            width: 20px;
            height: 20px;
            // background-color: pink;
            font-size: 20px;
            margin-right: 5px;
          }
        }

        p {
          font-size: 25px;
          // margin-left: 30px;
        }
      }

      .emilt {
        p {
          font-size: 14px;
        }
      }
      .NEXrexian {
      }
      .rexian {
      }
      .guanzhu {
        .icon {
          padding-left: 30px;
          :first-child {
            font-size: 25px;
          }
          i {
            display: inline-block;
            width: 30px;
            height: 30px;
            // background-color: pink;
            margin: 20px 10px 0 10px;
            font-size: 30px;
          }
        }
      }
    }
  }
}
</style>